<template>
  <div class="login">
    <div>
      <h2 style="color: rgb(253, 200, 5);">用户登录</h2>
          <p class="rightTop">
              没有帐号？
              <a href="registerLink">立即注册</a>
          </p>
    </div>
    <div class="center">
      <form @submit.prevent="handleSubmit">
         
        <div>
          账号(用户名/邮箱):<br>
          <input type="text" v-model="account" placeholder="请输入账号">
        </div>
        <div>
          密码:<br>
          <input type="password" v-model="password" placeholder="请输入密码">
        </div>
        <div>
          <br>
          <a href="#" style="color: blue; float: right; margin-top: -1px;">忘记密码?</a>
        </div>
        <div>
          <input type="button" value="登录" @click="handleLogin" style="color: black; background-color: green; font-size: 10px;">
          <input type="reset" value="重置" @click="handleReset" style="color: black; background-color: yellow; font-size: 10px;">
        </div>
        <div v-if="showMessage" :class="messageClass">
          {{ message }}
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      account: '',
      password: '',
      message: '',
      showMessage: false,
      messageClass: ''
    };
  },
  computed: {
    registerLink() {
      return 'http://localhost:5173/registerLink'; // 可以设置为实际的注册页面链接

    }
  },
  methods: {
    handleLogin() {
      if (this.account === 'admin' && this.password === '123') {
        this.message = '登录成功';
        this.showMessage = true;
        this.messageClass = 'success';
        // 这里可以添加实际的登录成功处理逻辑，例如跳转到主页
      } else {
        this.message = '账号或密码错误';
        this.showMessage = true;
        this.messageClass = 'error';
      }
    },
    handleReset() {
      this.account = '';
      this.password = '';
      this.message = '';
      this.showMessage = false;
    },
    handleSubmit(event) {
      event.preventDefault();
      this.handleLogin();
    }
  }
};
</script>

<style scoped>
.login {
  margin: 0;
  padding: 0;
  height: 100vh; /* 设置高度为视口高度 */
  background-image: url('./test.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box; /* 确保内边距和边框不会增加元素的总宽度和高度 */
}

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* 确保宽度为 100% */
  max-width: 400px; /* 限制最大宽度 */
}

input[type="text"], input[type="password"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
}

header {
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  color: white;
  padding: 10px;
  width: 100%;
}

.success {
  color: green;
  font-weight: bold;
  margin-top: 10px;
}

.error {
  color: red;
  font-weight: bold;
  margin-top: 10px;
}
</style>